<template>
  <el-row>
    <el-col :span="2">设置列数：</el-col>
    <el-col :span="12">
      <el-slider
        v-model="formMeta.formMeta.formColCount"
        :min="1"
        :max="8"
      ></el-slider>
    </el-col>
  </el-row>
  
  <nf-form
    v-form-drag="formMeta"
    :model="model"
    v-bind="formMeta"
  >
  </nf-form>
</template>


<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { ElCol, ElRow, ElSlider } from 'element-plus'
  import { createModel } from '@naturefw/ui-core'
  import _formMeta from '../../form/form.json'
 
 
  export default defineComponent({
    name: 'nf-elp-form-page',
    components: {
      ElCol, ElRow, ElSlider
    },
    props: {
      moduleId: [Number, String],
      dataId: [Number, String],
      formMetaId: [Number, String],
      actionId: [Number, String],
      type: [Number, String],
      dialogInfo: [Object]
    },
    setup(props, context) {
      // 获取表单控件需要的meta
      const formMeta = reactive(_formMeta)
      // 改为插槽
      // formMeta.itemMeta[101].controlType = 1

      // 根据 meta 创建表单的 model
      const model = createModel(formMeta.itemMeta, formMeta.formMeta.colOrder)

      const addNew = () => {
        const a = {}
        Object.assign(a, model)
        // dataList.unshift(a)
      }
      
      return {
        formMeta,
        addNew,
        model
      }

    }
  })
  

</script>